ES6 新特性扩展运算符(...)详解

2024-01-14 11:14| 来源: 网络整理| 查看: 265

这是我参与更文挑战的第 13 天，活动详情查看: 更文挑战

扩展操作符（...）可在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还以在构造对象时, 将对象表达式按key-value的方式展开；

1. 数组

1.1 构造数组没有扩展运算符的时候，只能组合使用 push，splice，concat 等方法，将已有数组元素变成新数组的一部分。有了扩展运算符, 构造新数组会变得更简单、更优雅：扩展运算符(spread)就是我们知道的三个点(...)，它就好像 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3]); // 1 2 3 console.log(1,...[2,3,4],5) // 1 2 3 4 5 console.log([1,...[2,3,4],5]) // [1, 2, 3, 4, 5]

1.2 数组拷贝展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝

let arr = [1, 2, 3]; let arr2 = [...arr]; // [1, 2, 3] arr2.push(4); console.log(arr2); // [1, 2, 3, 4] // 数组含空位 let arr3 = [1, , 3], arr4 = [...arr3]; console.log(arr4); // [1, undefined, 3]

1.3 合并数组本质：将一个数组转为用逗号分隔的参数序列，然后置于数组中

var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回 //等同于 var arr4 = arr1.concat(arr2); console.log(arr3,arr4) // [0,1,2,3,4,5] [0,1,2,3,4,5] 2. 对象

扩展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。 2.1 克隆对象当 String，Number，Boolean 时，属于深拷贝；当 Object，Array时，属于浅拷贝；

var obj1 = { foo: 'bar', x: 42 }; var clonedObj = { ...obj1 }; console.log(clonedObj); // { foo: "bar", x: 42 }

2.2 合并对象

let age = {age: 15}; let name = {name: "Amy"}; let person = {...age, ...name}; console.log(person); // {age: 15, name: "Amy"}

注意：自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉；自定义的属性在拓展运算度前面，则自定义的属性将被覆盖掉；

扩展运算符后面是空对象、null、undefined，没有任何效果也不会报错。

//空对象 let a = {...{}, a: 1, b: 2}; console.log(a); //{a: 1, b: 2} // null 、 undefined let b = {...null, ...undefined, a: 1, b: 2}; console.log(b); //{a: 1, b: 2} 3. 函数

函数调用中，扩展运算符（...）将一个数组，变为参数序列

function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; //不使用延展操作符 console.log(sum.apply(null, numbers)); //使用延展操作符 console.log(sum(...numbers)); // 6

扩展运算符与的函数参数可以结合使用，非常灵活：

function f(x,y,z,v,w,u){ console.log(x,y,z,v,w,u) } var args = [0,1,5]; f(-1,...args,2,...[3]); // -1, 0, 1, 5, 2 ,3 4. 在 react 中的运用

通常我们在封装一个组件时，会对外公开一些 props 用于实现功能，大部分情况下在外部使用都应显示的传递 props ，但是当传递大量的props时，会非常繁琐，这时我们可以使用 ...(扩展操作符,用于取出参数对象的所有可遍历属性) 来进行传递。

之前的写法：

使用 ... ，等同于上面的写法

const params = {name: 'Jine', age: 21}

配合解构赋值避免传入一些不需要的参数

var params = { name: '123', title: '456', type: 'aaa' } var { type, ...other } = params; //等同于

【本文地址】

公司简介

联系我们

ES6 新特性 扩展运算符(...)详解

ES6 新特性扩展运算符(...)详解